<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<style>
		 .c1{
			 font-size: 100px; 
		 }
		 .c2{
		 			 font-size: 4px; 
		 }
		</style>
	</head>
	<body>
		<div id="app">
			<p v-show="show">{{msg}}</p>
			<!-- <p v-if="show">{{msg}}</p> -->
			<div id="d2" style="font-size: 40;color: brown;">
				<p v-if="age>20">成年人</p>
				<p v-else-if="age>16">准成年人</p>
				<p v-else>未成年</p>
			</div>
			<p :class="age>=18?'c1':'c2'">
				{{age}}
			</p>
			<button type="button" @click="togP">toggle</button>
		</div>
		<script>
		 var vm=new Vue({
			 el:'#app',
			 data:{
				 show:false,
				 msg:"你好，教育改变生活部哦",
				 age:9
			 } 
			 ,methods:{
				 togP:function(){
					 this.show=!this.show;
				 }
			 }
		 })
		</script>
	</body>
</html>
